ExtJS Layout এবং Container Management

ExtJS তে Layout এবং Container Management অত্যন্ত গুরুত্বপূর্ণ বিষয়, যা অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) কাঠামো এবং কম্পোনেন্টগুলোর যথাযথ প্রদর্শন নিশ্চিত করে। Layout সিস্টেম এবং Containers ব্যবহারের মাধ্যমে আপনি বিভিন্ন UI কম্পোনেন্টকে সহজভাবে বিন্যাস এবং পরিচালনা করতে পারেন।

Layout এবং Container Management এর ভূমিকা

• Containers: এটি একটি বিশেষ ধরনের কম্পোনেন্ট যা অন্য কম্পোনেন্টগুলো ধারণ করে এবং তাদের লেআউট বা পজিশনিং নিয়ন্ত্রণ করে।
• Layouts: এটি Containers এর মধ্যে কম্পোনেন্টগুলোর প্রদর্শনের জন্য ব্যবহৃত পদ্ধতি। Layouts বিভিন্ন ধরনের হতে পারে, যেমন hbox, vbox, border, fit, ইত্যাদি।

Containers এবং Layouts এর মধ্যে সম্পর্ক

• Containers কম্পোনেন্টগুলিকে একটি একক ইউনিট হিসেবে ধারণ করে, এবং তাদের মধ্যে বিভিন্ন লেআউট অ্যাপ্লাই করা হয়।
• Layout কম্পোনেন্টের আকার এবং অবস্থান নিয়ন্ত্রণ করে, যাতে UI উপাদানগুলো সাজানো থাকে।

Containers এর প্রকারভেদ

ExtJS তে বেশ কিছু ধরনের containers রয়েছে যা বিভিন্ন প্রকারের লেআউট পরিচালনা করতে সাহায্য করে:

1. Ext.container.Container:
   • এটি একটি মৌলিক কন্টেইনার যা অন্যান্য কম্পোনেন্ট ধারণ করতে পারে।
   • এটি সাধারণত নির্দিষ্ট layout সহ ব্যবহৃত হয়।
2. Ext.panel.Panel:
   • Panel একটি কন্টেইনার, যা উইন্ডো বা ডায়ালগ হিসাবে ব্যবহৃত হতে পারে।
   • এতে title, collapsible, floating ইত্যাদি ফিচার থাকে।

Layout Types

১. hbox Layout (Horizontal Box Layout)

hbox layout হলো একধরনের horizontal লেআউট যেখানে কম্পোনেন্টগুলো একের পর এক অনুভূমিকভাবে সাজানো হয়।

Ext.create('Ext.container.Container', {
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            width: 100
        },
        {
            xtype: 'panel',
            title: 'Panel 2',
            width: 200
        },
        {
            xtype: 'panel',
            title: 'Panel 3',
            width: 150
        }
    ],
    renderTo: Ext.getBody()
});

• hbox: এটি কম্পোনেন্টগুলোকে অনুভূমিকভাবে (horizontal) সাজানোর জন্য ব্যবহৃত হয়।
• width: প্রতিটি প্যানেলের প্রস্থ নির্ধারণ করা হয়েছে।

২. vbox Layout (Vertical Box Layout)

vbox layout হলো একধরনের vertical লেআউট, যেখানে কম্পোনেন্টগুলো একের পর এক উল্লম্বভাবে সাজানো হয়।

Ext.create('Ext.container.Container', {
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            height: 100
        },
        {
            xtype: 'panel',
            title: 'Panel 2',
            height: 150
        },
        {
            xtype: 'panel',
            title: 'Panel 3',
            height: 120
        }
    ],
    renderTo: Ext.getBody()
});

• vbox: এটি কম্পোনেন্টগুলোকে উল্লম্বভাবে (vertical) সাজানোর জন্য ব্যবহৃত হয়।
• height: প্রতিটি প্যানেলের উচ্চতা নির্ধারণ করা হয়েছে।

৩. border Layout

border layout হলো একটি জনপ্রিয় লেআউট যেখানে একটি কন্টেইনারের চারপাশে উত্তর (north), দক্ষিণ (south), পূর্ব (east), পশ্চিম (west) এবং কেন্দ্র (center) অঞ্চল থাকে। এটি সাধারণত ওয়েব অ্যাপ্লিকেশন বা ড্যাশবোর্ডে ব্যবহৃত হয়।

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [
        {
            xtype: 'panel',
            title: 'North Panel',
            region: 'north',
            height: 100
        },
        {
            xtype: 'panel',
            title: 'South Panel',
            region: 'south',
            height: 100
        },
        {
            xtype: 'panel',
            title: 'West Panel',
            region: 'west',
            width: 150
        },
        {
            xtype: 'panel',
            title: 'Center Panel',
            region: 'center',
            html: 'Center Content Here'
        }
    ]
});

• region: প্রতিটি প্যানেলের অবস্থান (উত্তর, দক্ষিণ, পশ্চিম, পূর্ব, কেন্দ্র) নির্ধারণ করা হয়েছে।
• height / width: প্যানেলের আকার নির্ধারণ করা হয়েছে।

৪. fit Layout

fit layout কন্টেইনারের একমাত্র কম্পোনেন্টকে পুরো কন্টেইনারের মধ্যে ফিট করার জন্য ব্যবহৃত হয়।

Ext.create('Ext.container.Container', {
    layout: 'fit',
    items: [{
        xtype: 'panel',
        title: 'Fit Panel',
        html: 'This panel fits the container!',
        bodyPadding: 10
    }],
    renderTo: Ext.getBody()
});

• fit: কন্টেইনারের একমাত্র কম্পোনেন্টকে পুরো কন্টেইনারে ফিট করে দেয়।

Layout কনফিগারেশন

কম্পোনেন্টের layout প্রপার্টি ব্যবহার করে আপনি কন্টেইনারের লেআউট নির্ধারণ করতে পারেন। items প্রপার্টি ব্যবহার করে কন্টেইনারের মধ্যে কম্পোনেন্ট যোগ করা হয়।

Layout কনফিগারেশন উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Border Layout Panel',
    layout: 'border',
    width: 500,
    height: 300,
    items: [
        {
            xtype: 'panel',
            title: 'North',
            region: 'north',
            height: 50,
            html: 'North Region Content'
        },
        {
            xtype: 'panel',
            title: 'Center',
            region: 'center',
            html: 'Center Region Content'
        }
    ],
    renderTo: Ext.getBody()
});

• xtype: প্যানেল বা অন্যান্য কম্পোনেন্ট।
• region: যে অঞ্চলে প্যানেলটি থাকবে (উত্তর, দক্ষিণ, পশ্চিম, পূর্ব, কেন্দ্র)।
• layout: কন্টেইনারের লেআউট (এখানে border ব্যবহৃত হয়েছে)।

Container Management

Containers বিভিন্ন কম্পোনেন্ট ধারণ করে এবং তাদের অবস্থান ও লেআউট কনফিগার করে। ExtJS তে container কম্পোনেন্টের মধ্যে অন্যান্য কম্পোনেন্ট যেমন প্যানেল, বাটন, ফর্ম, টেবিল ইত্যাদি রাখা যায়। কন্টেইনারের লেআউট এবং পজিশনিংকে খুব সহজভাবে পরিচালনা করা যায়।

Container Management উদাহরণ:

Ext.create('Ext.container.Container', {
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            width: 100
        },
        {
            xtype: 'panel',
            title: 'Panel 2',
            width: 200
        },
        {
            xtype: 'panel',
            title: 'Panel 3',
            width: 150
        }
    ],
    renderTo: Ext.getBody()
});

• layout: 'hbox': কম্পোনেন্টগুলো অনুভূমিকভাবে সাজানো হবে।
• items: কন্টেইনারের মধ্যে যেসব কম্পোনেন্ট থাকবে।

সারাংশ

• Containers: অন্যান্য কম্পোনেন্ট ধারণ করে এবং তাদের অবস্থান ও লেআউট পরিচালনা করে।
• Layouts: Containers এর মধ্যে কম্পোনেন্টগুলো কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে (যেমন border, fit, hbox, vbox)।
• Flexbox এবং Border Layouts: জনপ্রিয় লেআউট পদ্ধতি যা ইউজার ইন্টারফেস তৈরি করতে সহায়ক।

ExtJS তে Layouts এবং Containers ব্যবহারের মাধ্যমে কম্পোনেন্টগুলোকে সুন্দরভাবে সাজানো যায়, যা অ্যাপ্লিকেশন ডিজাইন এবং রেসপন্সিভ UI তৈরির জন্য গুরুত্বপূর্ণ।

ExtJS এর Panel, Container, এবং Box Layout ব্যবস্থাপনা ইউজার ইন্টারফেসের লেআউট এবং উপাদানগুলোর বিন্যাস নিয়ন্ত্রণ করতে সহায়ক। এগুলি সাধারণত UI উপাদানগুলোকে একটি কনটেইনারের মধ্যে আছড়ে ফেলতে ব্যবহৃত হয়, যেখানে কম্পোনেন্টগুলো যথাযথভাবে সাজানো ও সজ্জিত করা হয়।

এগুলো ব্যবহার করে আপনি খুব সহজে ফ্লেক্সিবল, রেসপন্সিভ এবং কাস্টমাইজড লেআউট তৈরি করতে পারেন।

১. Panel

Panel কম্পোনেন্ট একটি কনটেইনার যা অন্য কম্পোনেন্ট এবং UI উপাদান ধারণ করতে পারে। এটি সাধারণত একটি বর্ডার, শিরোনাম এবং বডি ধারণ করে এবং html, items ইত্যাদি কনফিগারেশন দিয়ে অন্যান্য উপাদান যুক্ত করা হয়।

Panel উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'My Panel',       // প্যানেলের শিরোনাম
    width: 300,              // প্যানেলের প্রস্থ
    height: 200,             // প্যানেলের উচ্চতা
    html: '<p>Welcome to ExtJS!</p>',  // প্যানেলের ভিতরের HTML কনটেন্ট
    renderTo: Ext.getBody()  // DOM এর body তে রেন্ডার হবে
});

এখানে:

• title: প্যানেলের শিরোনাম নির্ধারণ করে।
• width / height: প্যানেলের আকার নির্ধারণ করে।
• html: প্যানেলের ভিতরের HTML কনটেন্ট।
• renderTo: প্যানেলটি কোন DOM এলিমেন্টে রেন্ডার হবে তা নির্ধারণ করে।

Panel সাধারণত ব্যবহারকারীর তথ্য প্রদর্শন করতে, তথ্য ফর্ম বা ডেটা ভিউ সংক্রান্ত কাজের জন্য ব্যবহৃত হয়।

২. Container

Container একটি মৌলিক কম্পোনেন্ট, যা অন্যান্য কম্পোনেন্টের জন্য কন্টেইনার হিসেবে কাজ করে। এটি layout কনফিগারেশনের মাধ্যমে অন্তর্ভুক্ত কম্পোনেন্টগুলোর পজিশন এবং বিন্যাস নিয়ন্ত্রণ করে। Container কম্পোনেন্টটি সাধারণত Panel, Window এবং অন্যান্য উইন্ডো টাইপ কম্পোনেন্টের ভিত্তি।

Container উদাহরণ:

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: 'hbox',  // হরিজেন্টাল বক্স লেআউট
    items: [{
        xtype: 'panel',
        title: 'Panel 1',
        width: 150,
        height: 100
    }, {
        xtype: 'panel',
        title: 'Panel 2',
        width: 150,
        height: 100
    }]
});

এখানে:

• layout: কন্টেইনারের ভেতরে কম্পোনেন্টগুলোর বিন্যাস নিয়ন্ত্রণ করে। এখানে hbox লেআউট ব্যবহৃত হয়েছে, যা উপাদানগুলোকে একে অপরের পাশে রেখেছে।
• items: কন্টেইনারে রাখা কম্পোনেন্টগুলো (যেমন Panel)।

৩. Box Layout

Box Layout একটি লেআউট ম্যানেজার, যা এক বা একাধিক কম্পোনেন্টকে একটি এক্সিসে (অথবা অনুভূমিক বা উল্লম্বভাবে) সাজায়। এটি দুটি প্রধান টাইপে আসে:

1. hbox: অনুভূমিকভাবে কম্পোনেন্টগুলো সাজানো হয়।
2. vbox: উল্লম্বভাবে কম্পোনেন্টগুলো সাজানো হয়।

Box Layout উদাহরণ:

hbox (Horizontal Box Layout) উদাহরণ:

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: 'hbox',  // অনুভূমিক বক্স লেআউট
    items: [{
        xtype: 'panel',
        title: 'Panel 1',
        width: 150,
        height: 100
    }, {
        xtype: 'panel',
        title: 'Panel 2',
        width: 150,
        height: 100
    }]
});

এখানে, hbox লেআউটের মাধ্যমে দুটি প্যানেল অনুভূমিকভাবে একে অপরের পাশে সাজানো হয়েছে।

vbox (Vertical Box Layout) উদাহরণ:

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: 'vbox',  // উল্লম্ব বক্স লেআউট
    items: [{
        xtype: 'panel',
        title: 'Panel 1',
        width: 150,
        height: 100
    }, {
        xtype: 'panel',
        title: 'Panel 2',
        width: 150,
        height: 100
    }]
});

এখানে, vbox লেআউটের মাধ্যমে দুটি প্যানেল উল্লম্বভাবে একে অপরের উপরে সাজানো হয়েছে।

৪. Box Layout এর কনফিগারেশন

Box Layout ব্যবহারে কিছু গুরুত্বপূর্ণ কনফিগারেশন যেমন pack, align ইত্যাদি ব্যবহার করা হয়।

• pack: উপাদানগুলির স্থান নির্ধারণ করে (উদাহরণস্বরূপ, start, center, end ইত্যাদি)।
• align: উপাদানগুলির ভারটিক্যাল অ্যালাইনমেন্ট নির্ধারণ করে (উদাহরণস্বরূপ, stretch, center, start ইত্যাদি)।

Box Layout এর সাথে Pack এবং Align কনফিগারেশন:

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: {
        type: 'hbox',
        pack: 'center',  // উপাদানগুলোকে কেন্দ্রীভূত করবে
        align: 'middle'  // উপাদানগুলোকে উল্লম্বভাবে মাঝখানে রাখবে
    },
    items: [{
        xtype: 'panel',
        title: 'Panel 1',
        width: 150,
        height: 100
    }, {
        xtype: 'panel',
        title: 'Panel 2',
        width: 150,
        height: 100
    }]
});

এখানে:

• pack: 'center': উপাদানগুলোকে কেন্দ্রে রেখেছে।
• align: 'middle': উপাদানগুলোকে উল্লম্বভাবে মাঝখানে রেখেছে।

সারাংশ

• Panel: একটি কনটেইনার কম্পোনেন্ট যা বিভিন্ন UI উপাদান ধারণ করে এবং কাস্টমাইজড লেআউট তৈরি করতে ব্যবহৃত হয়।
• Container: এক বা একাধিক উপাদান ধারণ করতে ব্যবহৃত কনটেইনার, যা layout এর মাধ্যমে উপাদানগুলোর বিন্যাস নিয়ন্ত্রণ করে।
• Box Layout: hbox এবং vbox লেআউটগুলির মাধ্যমে উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে সাজানো হয়।
• pack এবং align কনফিগারেশন ব্যবহার করে উপাদানগুলোর পজিশনিং এবং অ্যালাইনমেন্ট নিয়ন্ত্রণ করা যায়।

Panel, Container, এবং Box Layout ব্যবহারের মাধ্যমে আপনি খুব সহজে এবং কার্যকরভাবে UI উপাদানগুলি সাজাতে এবং কাস্টমাইজ করতে পারবেন। ExtJS এর এই বৈশিষ্ট্যগুলি ডেভেলপারদের শক্তিশালী এবং রেসপন্সিভ ইউজার ইন্টারফেস তৈরিতে সাহায্য করে।

ExtJS একটি শক্তিশালী UI ফ্রেমওয়ার্ক, যা কমপ্লেক্স এবং রেসপন্সিভ ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য বিভিন্ন ধরনের Containers এবং Layouts সরবরাহ করে। Nested Containers এবং Dynamic Layouts ব্যবহার করে, আপনি আরও জটিল UI স্ট্রাকচার তৈরি করতে পারবেন এবং অ্যাপ্লিকেশনের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারবেন।

১. Nested Containers

Containers হল ExtJS-এর উপাদান যা অন্য কম্পোনেন্ট বা উপাদানগুলো ধারণ করে। Nested Containers বলতে বোঝায় একটি কন্টেইনারের মধ্যে অন্য কন্টেইনার ব্যবহার করা। এটি বিভিন্ন স্তরে UI উপাদানগুলোকে গ্রুপিং এবং পজিশনিং করতে সহায়ক।

Nested Containers উদাহরণ:

ধরা যাক, আমাদের একটি Panel আছে যার মধ্যে একটি Toolbar, একটি Form, এবং একটি Grid রয়েছে। এখানে, আমরা এই কন্টেইনারগুলোর মধ্যে Nested Containers ব্যবহার করব।

Ext.create('Ext.panel.Panel', {
    title: 'Main Panel',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    layout: 'vbox', // Vertical layout for the parent container
    items: [
        {
            xtype: 'toolbar',
            width: '100%',
            items: [
                { text: 'Button 1' },
                { text: 'Button 2' }
            ]
        },
        {
            xtype: 'panel',
            title: 'Nested Panel',
            layout: 'hbox', // Horizontal layout for the nested container
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    flex: 1
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    flex: 1
                }
            ]
        },
        {
            xtype: 'grid',
            title: 'User Data',
            store: {
                fields: ['id', 'name', 'email'],
                data: [
                    { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
                    { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' }
                ]
            },
            columns: [
                { text: 'ID', dataIndex: 'id' },
                { text: 'Name', dataIndex: 'name' },
                { text: 'Email', dataIndex: 'email' }
            ]
        }
    ]
});

এখানে:

• Main Panel একটি vertical (vbox) লেআউট ব্যবহার করছে, যার মধ্যে একাধিক কম্পোনেন্ট রয়েছে।
• একটি Nested Panel রয়েছে যার মধ্যে horizontal (hbox) লেআউট ব্যবহার করা হয়েছে, এবং সেখানে দুটি TextField রাখা হয়েছে।

এটি একটি সাধারণ nested container উদাহরণ, যেখানে এক কন্টেইনারের ভিতরে আরেকটি কন্টেইনার রয়েছে এবং তারা নিজেদের মধ্যে ইন্টারঅ্যাক্ট করে।

২. Dynamic Layouts

Dynamic Layouts এর মাধ্যমে আপনি কন্টেইনারের লেআউটকে রানটাইমে পরিবর্তন করতে পারেন। এটি বিভিন্ন পরিস্থিতির উপর ভিত্তি করে কন্টেইনারের লেআউট পরিবর্তন করার জন্য ব্যবহৃত হয়, যেমন একটি কন্টেইনারের আকার পরিবর্তন হলে তার ভিতরের উপাদানগুলোও স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।

Dynamic Layouts উদাহরণ:

ধরা যাক, একটি Panel রয়েছে যেটির লেআউট শুরুতে hbox এবং পরে একটি বাটন ক্লিক করার পর সেটি vbox লেআউটে পরিবর্তিত হবে।

Ext.create('Ext.panel.Panel', {
    title: 'Dynamic Layout Example',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    layout: 'hbox', // Initially horizontal layout
    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'First Name',
            flex: 1
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Last Name',
            flex: 1
        },
        {
            xtype: 'button',
            text: 'Change Layout',
            handler: function() {
                // Dynamically change the layout to 'vbox'
                var panel = this.up('panel');
                panel.setLayout('vbox');
            }
        }
    ]
});

এখানে:

• প্রথমে hbox লেআউট ব্যবহার করা হয়েছে, যাতে টেক্সটফিল্ডগুলো একে অপরের পাশে থাকে।
• Change Layout বাটন ক্লিক করার পর, setLayout('vbox') মেথডের মাধ্যমে লেআউটটি vbox (vertical) এ পরিবর্তিত হবে এবং উপাদানগুলো একটির নিচে একে রেখে প্রদর্শিত হবে।

এটি Dynamic Layout ব্যবহারের একটি সাধারণ উদাহরণ যেখানে লেআউট রানটাইমে পরিবর্তিত হয়।

৩. Common Layout Types in ExtJS

ExtJS বেশ কয়েকটি সাধারণ লেআউট সিস্টেম সরবরাহ করে যা কম্পোনেন্টগুলোর পজিশন এবং আকার নিয়ন্ত্রণ করতে সহায়ক:

1. hbox / vbox Layout:

   • hbox লেআউট উপাদানগুলোকে অনুভূমিকভাবে সাজায়।
   • vbox লেআউট উপাদানগুলোকে উল্লম্বভাবে সাজায়।

   উদাহরণ:

   layout: 'hbox' // Horizontal layout
   layout: 'vbox' // Vertical layout
   

2. border Layout:

   • এই লেআউটটি একটি কন্টেইনারকে পাঁচটি অঞ্চলে ভাগ করে: North, South, East, West, এবং Center।

   উদাহরণ:

   layout: 'border',
   items: [
       {
           region: 'north',
           xtype: 'panel',
           height: 50
       },
       {
           region: 'center',
           xtype: 'grid',
           title: 'Main Grid'
       }
   ]
   

3. fit Layout:

   • একমাত্র কম্পোনেন্ট পুরো কন্টেইনারে ফিট হবে।

   উদাহরণ:

   layout: 'fit',
   items: [{
       xtype: 'panel',
       title: 'Fitted Panel'
   }]
   

4. absolute Layout:

   • এই লেআউটটি একটি নির্দিষ্ট x এবং y কোঅর্ডিনেটের ভিত্তিতে কম্পোনেন্টগুলোর অবস্থান নির্ধারণ করে।

   উদাহরণ:

   layout: 'absolute',
   items: [{
       xtype: 'button',
       text: 'Click Me',
       x: 100,
       y: 50
   }]
   

সারাংশ

1. Nested Containers: এক কন্টেইনারের ভিতরে আরেকটি কন্টেইনার রাখা যা কম্পোনেন্টগুলোর মধ্যে সম্পর্ক তৈরি করে এবং আরো জটিল UI স্ট্রাকচার তৈরি করতে সহায়ক।
2. Dynamic Layouts: আপনি কন্টেইনারের লেআউট রানটাইমে পরিবর্তন করতে পারেন, যা আরও ইউজার-বান্ধব এবং রেসপন্সিভ ডিজাইন তৈরি করতে সহায়ক।
3. Common Layout Types: ExtJS বিভিন্ন লেআউট সিস্টেম সরবরাহ করে, যেমন hbox, vbox, border, fit, absolute, ইত্যাদি, যা কন্টেইনার এবং তার উপাদানগুলোর পজিশন এবং আকার নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

এগুলি nested containers এবং dynamic layouts ব্যবহার করে আরও ফ্লেক্সিবল, রেসপন্সিভ এবং ইন্টারেক্টিভ UI তৈরি করার জন্য খুবই গুরুত্বপূর্ণ উপাদান।

ExtJS একটি শক্তিশালী UI ফ্রেমওয়ার্ক, যা বিভিন্ন ধরনের layout এবং UI কম্পোনেন্ট সরবরাহ করে, যা মাল্টি-ভিউ অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এর মধ্যে Card Layout এবং Tab Panels দুটি অত্যন্ত জনপ্রিয় উপাদান, যা একাধিক ভিউ বা প্যানেলকে একসাথে প্রদর্শন করতে ব্যবহৃত হয়। এই দুটি ফিচার ব্যবহার করে মাল্টি-ভিউ ডিজাইন তৈরি করা সহজ এবং কার্যকর।

১. Card Layout

Card Layout একটি লেআউট স্টাইল যা একসাথে একাধিক ভিউ বা কম্পোনেন্ট রাখে, তবে একবারে শুধুমাত্র একটি ভিউ দেখানো হয়। এটি এক ধরনের stacked layout, যেখানে একাধিক প্যানেল থাকে, কিন্তু শুধু একটি প্যানেল দৃশ্যমান থাকে এবং বাকি প্যানেলগুলো ব্যাকগ্রাউন্ডে থাকে।

Card Layout এর ব্যবহার:

Card Layout সাধারণত buttons, navigation bars, বা sliders এর সাথে ব্যবহার করা হয়, যাতে ব্যবহারকারী বিভিন্ন "cards" (প্যানেল বা ভিউ) এর মধ্যে স্যুইচ করতে পারে।

Card Layout উদাহরণ:

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'Card Layout Example',
    layout: 'card', // layout type: card
    items: [
        {
            xtype: 'panel',
            title: 'Card 1',
            html: 'This is Card 1'
        },
        {
            xtype: 'panel',
            title: 'Card 2',
            html: 'This is Card 2'
        },
        {
            xtype: 'panel',
            title: 'Card 3',
            html: 'This is Card 3'
        }
    ],
    bbar: [
        {
            text: 'Next Card',
            handler: function() {
                var layout = this.up('panel').getLayout();
                layout.next(); // Switch to the next card
            }
        }
    ]
});

এখানে, Card Layout ব্যবহার করে তিনটি প্যানেল (বা "card") তৈরি করা হয়েছে। নিচে একটি বাটন আছে, যা ব্যবহারকারীকে পরবর্তী "card"-এ নিয়ে যাবে। layout.next() ব্যবহার করা হয়েছে যাতে পরবর্তী প্যানেলে স্যুইচ করা যায়।

Card Layout এর বৈশিষ্ট্য:

• একটি সময়ে শুধুমাত্র একটি ভিউ: একবারে শুধুমাত্র একটি "card" (প্যানেল) দেখানো হয়, বাকি প্যানেলগুলো ব্যাকগ্রাউন্ডে থাকে।
• নেভিগেশন: ব্যবহারকারী সহজেই বিভিন্ন "cards" এর মধ্যে স্যুইচ করতে পারে।
• ডাইনামিক কন্টেন্ট: Card Layout ব্যবহার করে ডাইনামিকভাবে একাধিক ভিউ বা কন্টেন্ট প্রদর্শন করা যায়।

২. Tab Panels

Tab Panels একটি অত্যন্ত জনপ্রিয় উপাদান যা একাধিক ভিউ বা কম্পোনেন্টকে ট্যাব আকারে প্রদর্শন করে। প্রতিটি ট্যাব একটি নির্দিষ্ট ভিউ বা কন্টেন্টের সাথে সম্পর্কিত থাকে এবং ব্যবহারকারী যেকোনো ট্যাব ক্লিক করে সেই ভিউতে যেতে পারে। Tab Panels সাধারণত অ্যাপ্লিকেশন বা ড্যাশবোর্ডে বিভিন্ন বিভাগের ভিউ প্রদর্শন করতে ব্যবহৃত হয়।

Tab Panels এর ব্যবহার:

Tab Panels উদাহরণ:

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'Tab Panel Example',
    items: [
        {
            title: 'Tab 1',
            html: 'This is the content of Tab 1'
        },
        {
            title: 'Tab 2',
            html: 'This is the content of Tab 2'
        },
        {
            title: 'Tab 3',
            html: 'This is the content of Tab 3'
        }
    ]
});

এখানে, Tab Panel ব্যবহার করে তিনটি ট্যাব তৈরি করা হয়েছে, যেখানে প্রতিটি ট্যাবের সাথে একটি ভিউ বা কন্টেন্ট রয়েছে। যখন ব্যবহারকারী একটি ট্যাবে ক্লিক করবে, তখন সেই ট্যাবের কন্টেন্ট দৃশ্যমান হবে।

Tab Panels এর বৈশিষ্ট্য:

• ট্যাবের মাধ্যমে নেভিগেশন: ব্যবহারকারী ট্যাবের মধ্যে স্যুইচ করে ভিন্ন ভিন্ন ভিউ দেখতে পারে।
• একাধিক ভিউ সহ অ্যাপ্লিকেশন: Tab Panels ব্যবহার করে আপনি একাধিক ভিউ একসাথে প্রদর্শন করতে পারেন এবং ইউজারের জন্য এটি সুবিধাজনক হয়।
• স্বয়ংক্রিয় কন্টেন্ট আপডেট: একটি ট্যাব নির্বাচিত হলে, ট্যাবের সাথে যুক্ত কন্টেন্ট আপডেট হয়ে যায়।

৩. Card Layout এবং Tab Panel এর মধ্যে পার্থক্য

সারাংশ

• Card Layout এবং Tab Panels ব্যবহার করে ExtJS অ্যাপ্লিকেশনে মাল্টি-ভিউ ডিজাইন তৈরি করা সহজ। Card Layout একে অপরের সাথে স্ট্যাকড কম্পোনেন্ট প্রদর্শন করে, যেখানে একসাথে একটিই দৃশ্যমান থাকে, এবং Tab Panel ব্যবহার করে ট্যাবের মাধ্যমে ভিন্ন ভিন্ন ভিউগুলো দেখানো হয়।
• Card Layout সাধারণত ডাইনামিক ভিউ স্যুইচিংয়ের জন্য উপযুক্ত, যেখানে Tab Panels ব্যবহারকারীকে একাধিক ট্যাবের মাধ্যমে একাধিক ভিউ প্রদান করে।

এটি ব্যবহারকারীর জন্য একটি সুসংগঠিত এবং ইন্টারেক্টিভ UI তৈরি করতে সহায়ক।

Accordion Layout এবং Collapsible Panels হল ExtJS এর গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান, যা ইউজারের ইন্টারঅ্যাকশন এবং অ্যাপ্লিকেশনের ডাইনামিক অ্যাডজাস্টমেন্ট সক্ষম করে। এগুলি সাধারণত ব্যবহারকারীর জন্য স্পেস অপ্টিমাইজ করার জন্য এবং অ্যাপ্লিকেশনের বিভিন্ন সেকশনকে কার্যকরীভাবে প্রেজেন্ট করার জন্য ব্যবহৃত হয়।

এই গাইডে, আমরা Accordion Layout এবং Collapsible Panels কিভাবে তৈরি এবং ব্যবহার করতে হয়, তা দেখব।

১. Accordion Layout

Accordion Layout একটি লেআউট যা একাধিক প্যানেল বা সেকশনকে একটি সময়ে একটিতে প্রদর্শন করতে দেয়। যখন একটি প্যানেল খুলে যায়, তখন অন্য প্যানেলটি বন্ধ হয়ে যায়। এটি বিশেষভাবে ড্যাশবোর্ড বা কনটেন্ট এক্সপ্লোরেশন ইন্টারফেসে ব্যবহৃত হয়, যেখানে অনেক তথ্য একসাথে প্রদর্শন করতে হয়, তবে শুধুমাত্র একটি সেকশন একবারে দৃশ্যমান থাকে।

Accordion Layout উদাহরণ

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    layout: {
        type: 'accordion',
        animate: true  // এ্যানিমেটেড ট্রানজিশন সক্ষম
    },
    renderTo: Ext.getBody(),
    items: [
        {
            title: 'Panel 1',
            html: 'Content of Panel 1',
            collapsed: false  // প্রথম প্যানেল খোলা থাকবে
        },
        {
            title: 'Panel 2',
            html: 'Content of Panel 2'
        },
        {
            title: 'Panel 3',
            html: 'Content of Panel 3'
        }
    ]
});

ব্যাখ্যা:

• layout: { type: 'accordion' }: এটি লেআউট টেমপ্লেট হিসেবে অ্যাকর্ডিয়ন নির্বাচন করে।
• collapsed: false: প্রথম প্যানেলটি ডিফল্টভাবে খোলা থাকবে।
• animate: true: প্যানেল স্যুইচিং এ অ্যানিমেশন যুক্ত করা হয়েছে।

এখানে, তিনটি প্যানেল তৈরি করা হয়েছে, যেখানে একে একে একটি প্যানেল খোলা যাবে এবং বাকি প্যানেলগুলো বন্ধ থাকবে।

২. Collapsible Panels

Collapsible Panels হল এমন প্যানেল যা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে সংকুচিত বা বিস্তৃত (toggle) হতে পারে। এটি একটি প্যানেলের ভিউয়ের আকার পরিবর্তন করতে সাহায্য করে। প্যানেলটি টগল করার জন্য একটি বাটন বা ড্র্যাগ ব্যবহার করা যেতে পারে।

Collapsible Panel উদাহরণ

Ext.create('Ext.panel.Panel', {
    title: 'Collapsible Panel',
    width: 300,
    height: 200,
    collapsible: true,  // প্যানেলটিকে টগল করা যাবে
    collapsed: false,   // ডিফল্টভাবে প্যানেলটি খোলা থাকবে
    renderTo: Ext.getBody(),
    html: 'This is a collapsible panel!'
});

ব্যাখ্যা:

• collapsible: true: এটি প্যানেলটিকে টগলেবল করে তোলে, যাতে ব্যবহারকারী প্যানেলটি খোলার এবং বন্ধ করার জন্য একটি বাটন দেখতে পান।
• collapsed: false: ডিফল্টভাবে প্যানেলটি খোলা থাকবে। আপনি true করলে প্যানেলটি শুরুতে বন্ধ থাকবে।

৩. Collapsible Panels with Toolbars and Collapse/Expand Buttons

আপনি যদি প্যানেলটিতে collapse এবং expand করার জন্য কাস্টম বাটন যুক্ত করতে চান, তাহলে tools কনফিগারেশন ব্যবহার করতে পারেন, যা ব্যবহারকারীকে প্যানেলটি টগল করার জন্য একটি বাটন প্রদান করবে।

উদাহরণ: টুলবার সহ Collapsible Panel

Ext.create('Ext.panel.Panel', {
    title: 'Collapsible Panel with Toolbars',
    width: 300,
    height: 200,
    collapsible: true,
    tools: [{
        type: 'collapse', // collapse টুল
        handler: function() {
            alert('Panel collapsed!');
        }
    }],
    renderTo: Ext.getBody(),
    html: 'This is a collapsible panel with a collapse tool button.'
});

এখানে, tools কনফিগারেশন ব্যবহার করা হয়েছে যা একটি টুলবারে "collapse" বাটন প্রদর্শন করবে। যখন ব্যবহারকারী এটি ক্লিক করবে, প্যানেলটি সংকুচিত হবে এবং একটি এলার্ট প্রদর্শিত হবে।

৪. Multiple Collapsible Panels within Accordion Layout

আপনি একাধিক Collapsible Panels কে Accordion Layout এর মধ্যে সংযুক্ত করতে পারেন, যাতে একবারে একটি প্যানেল খোলা থাকে এবং অন্যান্য প্যানেলগুলি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।

উদাহরণ: Accordion Layout with Collapsible Panels

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout with Collapsible Panels',
    layout: {
        type: 'accordion',
        animate: true
    },
    renderTo: Ext.getBody(),
    items: [
        {
            title: 'Panel 1',
            html: 'Content of Panel 1',
            collapsible: true,  // এটি collapsible প্যানেল হবে
            collapsed: false
        },
        {
            title: 'Panel 2',
            html: 'Content of Panel 2',
            collapsible: true,  // এটি collapsible প্যানেল হবে
            collapsed: true
        },
        {
            title: 'Panel 3',
            html: 'Content of Panel 3',
            collapsible: true,  // এটি collapsible প্যানেল হবে
            collapsed: true
        }
    ]
});

এখানে, একটি Accordion Layout তৈরি করা হয়েছে এবং এতে তিনটি Collapsible Panels সংযুক্ত করা হয়েছে। প্রতিটি প্যানেল একটি নির্দিষ্ট সময়ের জন্য খোলা বা বন্ধ থাকবে, এবং ব্যবহারকারী তাদের টগল করতে পারবে।

৫. Responsive Design for Accordion and Collapsible Panels

Responsive Design একটি গুরুত্বপূর্ণ দিক, যাতে আপনার অ্যাপ্লিকেশন মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মেই ভালভাবে কাজ করে। ExtJS তে আপনি লেআউট এবং প্যানেলগুলোর responsive আচরণ কনফিগার করতে পারেন।

উদাহরণ: Responsive Accordion Layout

Ext.create('Ext.panel.Panel', {
    title: 'Responsive Accordion Layout',
    layout: {
        type: 'accordion',
        animate: true
    },
    width: '100%',
    renderTo: Ext.getBody(),
    items: [
        {
            title: 'Panel 1',
            html: 'Content of Panel 1',
            collapsible: true,
            collapsed: false
        },
        {
            title: 'Panel 2',
            html: 'Content of Panel 2',
            collapsible: true,
            collapsed: true
        }
    ]
});

এখানে, width: '100%' সেট করা হয়েছে, যা গ্রিড বা প্যানেলকে responsively কাজ করতে সাহায্য করবে, বিশেষ করে মোবাইল ডিভাইসে।

সারাংশ

1. Accordion Layout: এটি একাধিক প্যানেলকে একটি সময়ে একটিতে প্রদর্শন করতে ব্যবহৃত হয়। একটি প্যানেল খোলার সাথে অন্যটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।
2. Collapsible Panels: এগুলি টগলযোগ্য প্যানেল যেখানে ব্যবহারকারীরা প্যানেলটি সংকুচিত বা বিস্তৃত করতে পারেন।
3. Tools: কাস্টম টুলস ব্যবহার করে প্যানেলে ইন্টারঅ্যাক্টিভ বাটন যেমন collapse এবং expand যোগ করা যায়।
4. Responsive Design: ExtJS তে আপনি অ্যাকর্ডিয়ন এবং কোলাপসিবল প্যানেলগুলো মোবাইল এবং ডেস্কটপ উভয় ডিভাইসের জন্য responsively কনফিগার করতে পারেন।

এই উপাদানগুলো ব্যবহারের মাধ্যমে আপনি খুব সহজে একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারবেন যা বিভিন্ন স্ক্রীন সাইজে স্বাভাবিকভাবে কাজ করবে।